<template>
  <div class="ele-avatar-list">
    <div
      v-for="(item, index) in data.slice(0, length)"
      :key="index"
      class="ele-avatar-list-item"
    >
      <el-avatar
        :src="item.src"
        :size="size"
      />
    </div>
    <div
      v-if="length && data.length - length > 0"
      class="ele-avatar-list-item"
    >
      <el-avatar class="ele-avatar-list-item-more">
        +{{ data.length - length }}
      </el-avatar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from '@vue/runtime-core'
import { ElAvatar, ElTooltip } from 'element-plus'

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  size: {
    type: [Number, String],
    default: 40,
  },
  length: {
    type: [Number, String],
  },
})
</script>

<style>
.ele-avatar-list-item {
  display: inline-block;
  margin-left: -12px;
}
</style>
